<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="11" class="el_row_bg">
        <el-form ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="85px" class="el_form">
          <div class="title-form">商户账号信息</div>
          <el-form-item label="用户名" prop="username">
            <el-input :disabled="true" v-model="dataForm.username" type="text"/>
          </el-form-item>
          <el-form-item label="注册邮箱" prop="email">
            <el-input :disabled="true" v-model="dataForm.email" type="text" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="商户ID" prop="shopId">
            <el-input :disabled="true" v-model="dataForm.shopId" type="text" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input :disabled="true" v-model="dataForm.password" type="text" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="">
            <router-link to="/profile/password"><el-button type="primary" plain>修改密码</el-button></router-link>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="11" class="el_row_bg">
        <el-form ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="85px" class="el_form">
          <div class="title-form">商户门店信息</div>
          <el-form-item label="门店名称" prop="shopName">
            <el-input :disabled="true" v-model="dataForm.shopName" type="text"/>
          </el-form-item>
          <el-form-item label="联系人姓名" prop="contact">
            <el-input :disabled="true" v-model="dataForm.contact" type="text" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="联系人号码" prop="telephone">
            <el-input :disabled="true" v-model="dataForm.telephone" type="text" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="门店区域">
            <el-cascader
              :disabled="true"
              :options="options"
              v-model="selectedOptions"
              size="large" />
          </el-form-item>
          <el-form-item label="门店地址" prop="address">
            <el-input :disabled="true" v-model="dataForm.address" type="text" auto-complete="off"/>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="11" class="el_row_bg">
        <el-form ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="85px" class="el_form">
          <div class="title-form">法人信息</div>
          <el-form-item label="法人姓名" prop="corporation">
            <el-input :disabled="true" v-model="dataForm.corporation" type="text"/>
          </el-form-item>
          <el-form-item label="身份证号码" prop="idCard">
            <el-input :disabled="true" v-model="dataForm.idCard" type="text"/>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryShopInfo } from '@/api/shop'
import { getShopId } from '@/utils/auth'
import { regionData, TextToCode } from 'element-china-area-data'
export default {
  name: 'ShopInfo',
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      shopId: '',
      dataForm: {
      }
    }
  },
  created() {
    queryShopInfo(getShopId()).then(resp => {
      this.dataForm = resp.data.data
      const city = resp.data.data.city
      const province = resp.data.data.province
      const region = resp.data.data.region
      // console.log('resp:', resp, 'city:', city, 'province:', province, 'region:', region)
      this.selectedOptions = [TextToCode[province].code, TextToCode[province][city].code, TextToCode[province][city][region].code]
    })
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.app-container{
  padding: 20px 10px;
  min-width: 260px;
  width: 100%;
  border-radius: 5px;
  .el_row_bg{
    .el_form{
      border-radius: 5px;
      margin-bottom: 15px;
      box-shadow: 0 0 20px #dedede;
      border: 1px solid #eeeeee;
      padding: 10px;
      .title-form{
        margin-bottom: 15px;
        background: #f4f4f5;
        text-align: center;
        font-size: 24px;
        padding: 10px;
        font-weight: bold;
        opacity: 0.5;
        background: #acf;
        border-radius: 5px;
        cursor: context-menu;
      }
    }
    .el_form{
      width: 100%;
    }
  }
}
</style>
